/**
 * 医学表达式
 */
function scExpressionSetting(){
    var opt = null;
    var com = scCommon.instance();
    var crEle = com.crEle;

    var list = [
        {
            label: "牙位图", 
            expressionType: "toothMap", 
            component: new scToothMap(), 
            method: {
                get: "getCache",
                set: "setCache"
            }
        },
        {
            label: "月经公式", 
            expressionType: "menstruation"
        }
    ];

    var listener = null;
    var showDialog = null;
    var box = null;

    /**
     * 设置参数
     * @param {*} option 
     */
    this.setOption = function(option){
        opt = option;
    }

    this.createView = function(option){
        option = option ? option : {};
        listener = option.triggerListener; 
        showDialog = option.showDialog;

        box = crEle("div", "sc-expression-setting");
        
        var ul = crEle("ul");
        box.appendChild(ul);

        for(let i = 0; i < list.length; i++){
            let spanImg = crEle("span", "sc-button-img");
            let spanText = crEle("span", "sc-button-text");

            let li = crEle("li");
            spanText.innerText = list[i].label;

            li.appendChild(spanImg);
            li.appendChild(spanText);

            ul.appendChild(li);

            list[i].element = li;
        }

        ul.addEventListener("click", (e)=>{
            e.stopPropagation();

            let node = com.getParentNode(e.target, "li");
            if(!node) return;

            let item = list.find(it=>it.element === node);
            if(!item) return;

            showDialog({
                label: item.label,
                component: this.getDetail({
                    button: item
                })
            });
        });

        return box;
    }

    /**
     * 内部视图
     * @param {*} opt 
     * @returns 
     */
    this.getDetail = function(opt){
        opt = opt ? opt : {};

        if(!opt.button && opt.expressionType){
            opt.button = list.find(item=>item.expressionType == opt.expressionType);
            if(!opt.button) return crEle(NULL, "sc-expression-view");
        }

        let box = null;
        let btn = opt.button;

        this.createView = function(option){
            option = option ? option : {};
            box = crEle(null, "sc-expression-view");

            let row = crEle("div", "sc-expression-view-row");
            let label = crEle("label");
            let input = crEle("input");
            
            label.innerText = "编码：";
            input.type = "text";
            input.name = "id";
            input.placeholder = "唯一编码，必填";

            row.appendChild(label);
            row.appendChild(input);

            box.appendChild(row);

            row = crEle("div", "sc-expression-view-row");

            label = crEle("label");
            label.innerHTML = "编辑牙位图：<br/><div style='color:red;'>(点击右侧)</div>";

            let component = btn.component;
            let div = crEle("div");

            div.innerHTML = component.getTemplate();
            
            row.appendChild(label);
            
            let viewNode = component.createView({
                selector: div.children[0]
            });
            btn.innerId = viewNode.getAttribute("inner-id");

            if(opt.expressionData){
                component[btn.method.set](opt.expressionData);
            }

            row.appendChild(viewNode);

            box.appendChild(row);

            return box;
        }

        this.getData = async function(){
            return await new Promise(async (resolve)=>{
                let data = await com.getData(box);
                let node = document.querySelector(`[inner-id='${btn.innerId}']`);
                let present = node.querySelector(".toothMapPresent");
    
                let base64 = await htmlToImage(present);

                data.presentType = "expression";
                data.expressionType = btn.expressionType;
                data.expressionData = btn.component[btn.method.get]();

                resolve({
                    $value: base64,
                    $option: data
                });
            });
        }

        return this;
    };

    /**
     * 将html转成图片
     * @param {*} element 
     * @returns 
     */
    var htmlToImage = async function(element){
        return await new Promise((resolve)=>{
            html2canvas(element, {scale: 2}).then((canvas)=>{
                resolve(canvas.toDataURL());
            });
        })
    }

}